<script setup>
import IconSimple from '@/components/icon-simple/index.vue'
import InputX from '@/components/input-x/index.vue'
import {computed, inject, getCurrentInstance, ref, watch} from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'text' // text-文案 input-输入框
  },
  inputType: {
    type: String,
    default: 'text'
  },
  inputMaxlength: Number,
  modelValue: String,
  icon: String,
  iconSize: {
    type: Number,
    default: 24
  },
  rightIcon: String,
  label: String,
  sublabel: String,
  value: String,
  placeholder: String,
  labelWidth: Number,
  valueDarkColor: Boolean,
  link: Boolean,
  textAlign: String,
  size: String, // small-小尺寸 default-默认尺寸
  subfix: String,
  alignItems: String,
  required: Boolean,
  valueStyles: {
    type: Object,
    default: () => ({})
  },
  subfixStyles: {
    type: Object,
    default: () => ({})
  },
})
const emit = defineEmits(['update:modelValue', 'click', 'rightIconClick'])

const val = ref(props.modelValue)

const cellProps = inject('cell-props')

const labelWidth = computed(() => ({ width: (props.labelWidth || cellProps.labelWidth) ? `${(props.labelWidth || cellProps.labelWidth)}px` : 'unset', flex: (props.labelWidth || cellProps.labelWidth) ? `0 0 ${(props.labelWidth || cellProps.labelWidth)}px` : 'unset' }))
const textAlign = computed(() => cellProps.textAlign || props.textAlign || 'right')
const smallSize = computed(() => cellProps.size === 'small' || props.size === 'small')

const typeTextShow = computed(() => props.type === 'text' && (props.value || props.placeholder))
const typeInputShow = computed(() => props.type === 'input')

const cellValueText = computed(() => props.value || props.placeholder)
const textClass = computed(() => ({
  'value-padding': props.label,
  'cell-value-dark-color': props.value && (cellProps.valueDarkColor || props.valueDarkColor),
  'cell-value-default': props.value,
  'cell-placeholder': !props.value && props.placeholder,
}))
const textStyles = computed(() => ({
  textAlign: textAlign.value,
  ...(props.value ? props.valueStyles : {})
}))

const compIndex = getCurrentInstance().parent.ctx.$children.length

watch(val, newVal => emit('update:modelValue', newVal))

</script>

<template>
  <view
    class="cell-item-container"
    :class="{
      'cell-item-border-top': cellProps.border && compIndex !== 0,
      'cell-item-small-container': smallSize,
      'cell-item-isRequired': props.required
    }"
    :style="{ alignItems: cellProps.alignItems || props.alignItems || 'flex-start' }"
    @click="(e) => emit('click')"
  >
    <view class="prefix-container flex-row" :style="labelWidth">
      <icon-simple v-if="props.icon" :name="props.icon" :size="props.iconSize" :custom-style="{ marginRight: '8px' }" />
      <view class="cell-label"><slot name="label"></slot></view>
      <view class="cell-label-default">
        <view class="cell-main-label">{{ props.label }}</view>
        <view class="cell-sub-label" v-if="props.sublabel">{{ props.sublabel }}</view>
      </view>
    </view>
    <view class="middle-container flex-1">
      <view class="cell-input" v-if="typeInputShow">
        <input-x
          small
          :type="props.inputType"
          :text-align="textAlign"
          v-model="val"
          :placeholder="props.placeholder"
          :maxlength="props.inputMaxlength"
          :styles="{ backgroundColor: 'transparent' }"
          :input-styles="{ color: '#5A636E' }"
          :subfix-styles="{ ...props.subfixStyles }"
        >
          <template v-if="props.subfix" #subfix>{{ props.subfix }}</template>
        </input-x>
      </view>
      <view class="cell-value"><slot></slot></view>
      <view v-if="typeTextShow" :class="textClass" :style="textStyles">{{ cellValueText }}</view>
    </view>
    <view class="subfix-container">
      <icon-simple
        v-if="props.rightIcon"
        :name="props.rightIcon"
        @click.stop.prevent="(e) => emit('rightIconClick', e)"
      />
      <view v-if="!props.rightIcon"><slot name="rightIcon"></slot></view>
      <icon-simple v-if="props.link" name="next" />
    </view>
  </view>
</template>

<style scoped lang="scss">

.cell-item-container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 15px 0;
  min-height: 25Px;
}
.cell-item-isRequired {
  &::before {
    position: absolute;
    transform: translateX(-100%);
    left: 0;
    content: '*';
    @include fs28w500(#ff0000);
  }
}
.prefix-container {
  align-items: center;
}
.cell-item-small-container {
  padding: 6Px 0;
}
.cell-item-border-top {
  border-top: 1Px solid $kaoyan-color-12;
}
.cell-label-default,
.cell-value-default,
.cell-placeholder {
  display: none;
}
.cell-value:empty {
  display: none;
}
.cell-label:empty + .cell-label-default,
.cell-value:empty + .cell-value-default,
.cell-value:empty + .cell-placeholder {
  display: block;
}
.cell-label,
.cell-label-default {
  color: $kaoyan-color-9;
  font-size: 18Px;
  font-style: normal;
  font-weight: 600;
  line-height: 25Px;
  white-space: nowrap;
}
.cell-sub-label {
  font-size: 8px;
  line-height: 8px;
  color: $kaoyan-color-11;
}
.cell-value-default, .cell-placeholder {
  flex: 1;
  color: $kaoyan-color-10;
  font-size: 18Px;
  font-style: normal;
  font-weight: 400;
  line-height: 25Px;
}
.value-padding {
  padding-left: 16Px;
}
.cell-value-dark-color {
  color: $kaoyan-color-9;
}
.cell-placeholder {
  color: $kaoyan-color-11;
}
</style>
